<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <button id="btn">点我开始读取文件</button>
  </head>
  <body>
    <script>
      /* 需求：依次读取文件a,b,c */

      /* 1.promise异步函数 */

      //1.1 封装promise异步处理
      function getDataPromise (name) {
        return new Promise((resolve, reject) => {
          //模拟异步处理(readFile)
          setTimeout(() => {
            //成功
            if (['a', 'b', 'c'].indexOf(name) != -1) {
              resolve(`${name}文件数据`)
            } else {
              //失败
              reject(`读取错误`)
            }
          }, 1000)
        })
      }

      //1.2 async异步函数
      document.querySelector('#btn').onclick = async function () {
        console.log('第一次异步处理')
        let res1 = await getDataPromise('a')
        console.log(res1)

        console.log('第二次异步处理')
        let res2 = await getDataPromise('b')
        console.log(res2)

        /* 如果在async中想要捕捉promise的错误catch，则需要使用try-catch */
        try {
          console.log('第三次异步处理')
          let res3 = await getDataPromise('d')
          console.log(res3)
        } catch(err) {
            console.log(err)//这里的err就是promise的reject抛出的错误信息
        }

        console.log('异步执行完毕')
      }

      // //1.2 链式调用： promise解决异步回调地狱本质是在上一个promise的then方法中返回下一个promise
      //   document.querySelector('#btn').onclick = function () {
      //     getDataPromise('a')
      //       .then(res => {
      //         console.log(res)
      //         //返回下一个promise对象
      //         return getDataPromise('b')
      //       })
      //       .then(res => {
      //         console.log(res)
      //         //返回下一个promise对象
      //         return getDataPromise('c')
      //       })
      //       .then(res => {
      //         console.log(res)
      //       })
      //   }
    </script>
  </body>
</html>
